<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: right">
                <el-button style="float: left;" @click="back"><i class="el-icon-arrow-left"></i> 返回题库列表</el-button>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <!--<a download="true" class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small" style="float: left;"-->
                   <!--:href="URL+'/admin/question/exportScore?questionBankId='+pid">-->
                    <!--<i class="el-icon-download"></i>下载考生统计表-->
                <!--</a>-->
                <el-button type="primary" @click="add" style=""><i class="el-icon-circle-plus-outline"></i>添加题目</el-button>
                <!--<el-button type="info" @click="downTemplate"><i class="el-icon-download"></i>下载模板</el-button>-->
                <el-dropdown style="margin-left: 0.5rem;" @command="downTemplate">
                    <el-button type="warning">
                        下载模板<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">单选</el-dropdown-item>
                        <el-dropdown-item command="2">多选</el-dropdown-item>
                        <el-dropdown-item command="3">判断</el-dropdown-item>
                        <el-dropdown-item command="4">填空</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--<el-button type="primary" @click="addBatch"><i class="el-icon-upload2"></i>批量导入题目</el-button>-->
                <el-dropdown style="margin-left: 0.5rem;" @command="addBatch">
                    <el-button type="warning">
                        批量导入题目<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">单选</el-dropdown-item>
                        <el-dropdown-item command="2">多选</el-dropdown-item>
                        <el-dropdown-item command="3">判断</el-dropdown-item>
                        <el-dropdown-item command="4">填空</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="content" label="题目" sortable></el-table-column>
                <el-table-column prop="score" sortable label="分数" width="80"></el-table-column>
                <el-table-column label="类型" width="80">
                    <template slot-scope="scope">
                        {{scope.row.type|typeFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="难度" width="80">
                    <template slot-scope="scope">
                        {{scope.row.difficulty=='0'?'低':scope.row.difficulty=='1'?'中':'高'}}
                    </template>
                </el-table-column>
                <el-table-column label="选项">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type!='4'">
                            {{scope.row.option}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="正确答案" width="120">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.right_answer}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalRow">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑问题" :visible.sync="editVisible" width="50%">
            <question-add :pid="pid" :uid="questionId" ref="questionAdd" @done="roleDone"></question-add>
        </el-dialog>
    </div>
</template>

<script>
    import questionAdd from '@/components/module1/question-add'
    export default {
        components:{
            questionAdd,
        },
        name: 'paper',
        data() {
            return {
                select_word: '',
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,
                multipleSelection: [],
                editVisible: false,

                pid: '', // 父级题库id
                questionId: '', // 题目id

                URL: URL,
            }
        },
        computed: {
            data() {
            }
        },
        filters: {
            typeFilter(inp){
                let str = '';
                if(inp=='1') str='单选';
                if(inp=='2') str='多选';
                if(inp=='3') str='判断';
                if(inp=='4') str='填空';
                return str;
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val) {
                this.getData(val);
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/question/findPage', {
                    questionBankId: this.pid,
                    pageNum: pageNumber?pageNumber:1,
                    keyWord: this.select_word
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.pageNumber = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
                this.getData()
            },
            // 添加角色
            add(){
                this.editVisible = true;
                this.roleId = '';
                setTimeout(()=>{
                    this.$refs.questionAdd.getInfo({});
                }, 100);
            },
            // 编辑角色
            handleEdit(index, row) {
                this.editVisible = true;
                this.questionId = row.id;
                setTimeout(()=>{
                    this.$refs.questionAdd.getInfo(row);
                }, 100);
            },
            // 下载导入模板
            downTemplate(num){
                // /admin/question/getTemplate
                let a = document.createElement('a');
                // a.download = true;
                // a.href = this.URL+'/admin/question/getTemplate';
                // a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/题目导入模板.xls';
                // if(num=='1') {a.download = '单选导入模板';a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/AS61577774903482.xls';}
                if(num=='1') a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/单选导入模板.xls';
                if(num=='2') a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/多选导入模板.xls';
                if(num=='3') a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/判断导入模板.xls';
                if(num=='4') a.href = 'http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/填空导入模板.xls';
                a.click();
            },
            // 批量导入事件触发
            addBatch(num){
                let el = document.createElement('input');
                // let el = document.createElement('<input type="file" id="upFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">');
                el.type = 'file';el.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel';
                el.id = 'upFile';
                el.click();
                el.onchange = (e)=> {
                    // console.log(e.target.files[0])
                    this.upFile(num, e.target.files[0])
                }
            },
            // 导入文件
            upFile(num, file){
                this.loadopen();
                let formData = new FormData();
                // 向 formData 对象中添加文件
                formData.append('file',file);
                formData.append('type', num);
                formData.append('questionBankId',this.pid);
                this.config.inster('/admin/question/batchImport',formData).then((res)=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            handleDelete(index, row) {
                this.$confirm('确定删除此问题?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/question/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            roleDone(str) {
                this.editVisible = false;
                this.getData();
            },
            // 返回题库
            back(){
                this.$router.push('/module1/paper');
            }
        },
        mounted(){
            this.pid = this.$route.query['paperId'];
            if(!this.pid) return;
            this.getData(1);
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
